<template>
  <view class="page">
    <!-- #ifndef MP-WEIXIN-->
    <!-- <my-navbar leftText="结算单" :height="100" :background="'#ffffff'"  @leftClick="back" ></my-navbar> -->
    <!-- #endif -->
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />
    <!-- <div class="tabs_box">
      <view class="box">
        <u-subsection
          class="tabs"
          :list="list"
          :current="current"
          @change="changeTab"
          button-color="#0eaa78"
          active-color="#fff"
        ></u-subsection>
      </view>
    </div> -->
    <!-- 筛选条件 -->
    <div class="screen flex-row-between">
      <div
        class="screen-box"
        :class="current == 0 ? 'active' : 'noActive'"
        @click="changePayment(0)"
      >
        在线支付
      </div>
      <div
        class="screen-box"
        :class="current == 1 ? 'active' : 'noActive'"
        @click="changePayment(1)"
      >
        货到付款
      </div>
      <div class="screen-box" @click="openPicker">
        <span>日期</span>
        <image src="/static/images/ic-saixuan.svg"></image>
      </div>
    </div>
    <!-- 在线支付 -->
    <view class="content">
      <!-- <view
        class="list"
        v-for="item in dataList1"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <div style="flex: 1">
          <view class="left">
            <view>结算单号：{{ item.order_sn }}</view>
            <view
              >账期：<text>{{ item.payment_days }}</text></view
            >
            <view
              >差异金额：<text style="color: #e84b4b"
                >￥{{ item.diff_money }}</text
              ></view
            >
            <view
              >结算日期：<text style="color: #9a9a9a">{{
                item.createdTime
              }}</text></view
            >
          </view>
        </div>
        <u-icon class="icon" name="arrow-right"></u-icon>
      </view> -->
      <div
        class="content-box"
        v-for="(item, index) in current == 0 ? dataList1 : dataList2"
        :key="index"
      >
        <div class="content-box-top flex-row-between">
          <span class="content-box-top-left">结算单号：hjs202311220003</span>
          <u-icon name="arrow-right"></u-icon>
        </div>
        <div class="line"></div>
        <div class="content-box-bottom">
          <!-- 商品名称 -->
          <div class="shopBox flex-row-start">
            <div class="logo"></div>
            <span class="shopBox-name">菜东家生鲜</span>
            <u-icon name="arrow-right" :size="26"></u-icon>
          </div>

          <!-- 订单信息 -->
          <div class="order">
            <div
              class="order-div flex-row-between"
              v-for="(items, indexs) in orderList"
              :key="indexs"
            >
              <span class="title" v-if="showFun(items)">{{ items.name }}</span>
              <span
                class="value"
                v-if="showFun(items)"
                :style="{ color: items.color }"
                >{{ item[items.value] }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <view class="nodata" v-if="dataList1.length == 0">
        <image :src="nodataImg" mode="aspectFit"></image>
        <view>空空如也~</view>
      </view>
    </view>
    <!-- 货到付款 -->
    <!-- <view class="content" v-show="current == 1">
      <view
        class="list"
        v-for="item in dataList2"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <div style="flex: 1">
          <view class="left">
            <view>结算单号：{{ item.order_sn }}</view>
            <view
              >账期：<text>{{ item.payment_days }}</text></view
            >
            <view
              >付款金额：<text style="color: #e84b4b"
                >￥{{ item.collect_money }}</text
              ></view
            >
            <view
              >抹零金额：<text style="color: #e84b4b"
                >￥{{ item.zero_money }}</text
              ></view
            >
            <view
              >结算日期：<text style="color: #9a9a9a">{{
                item.createdTime
              }}</text></view
            >
          </view>
        </div>
        <u-icon class="icon" name="arrow-right"></u-icon>
      </view>
      <view class="nodata" v-if="dataList2.length == 0">
        <image :src="nodataImg" mode="aspectFit"></image>
        <view>空空如也~</view>
      </view>
    </view> -->

    <!-- <u-popup v-model="show" mode="bottom" border-radius="28" :closeable="true">
      <div class="screen-show flex-column-start">
        <div class="screen-show-selectBox flex-row-start">
          <div
            class="time"
            :class="indexActive == 1 ? 'active' : ''"
            @click="changeTime(1)"
          >
            日期选择
          </div>
          <div
            class="time"
            :class="indexActive == 2 ? 'active' : ''"
            @click="changeTime(2)"
          >
            自定义时间
          </div>
        </div>
        <u-picker
          mode="region"
          v-model="show1"
          :area-code="['13', '1303', '130304']"
        ></u-picker>
      </div>
    </u-popup> -->
    <h-datetime-picker
      ref="pickerDate"
      @reset="reset"
      @confirm="confirm"
    ></h-datetime-picker>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      nodataImg: getApp().globalData.nodataImg,
      list: [{ name: "在线支付" }, { name: "货到付款" }],
      current: 0,

      dataList1: [],
      dataList2: [],
      pages1: {
        page: 1,
        count: null,
      },
      pages2: {
        page: 1,
        count: null,
      },

      config: {
        title: "结算单",
        color: "#333333",
        fontSize: "18px",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },
      // 付款方式的模态框
      show: false,
      show1: false,

      orderList: [
        {
          name: "账期：",
          value: "payment_days",
          color: "#333333",
          key: "0,1",
        },
        {
          name: "差异金额：",
          value: "diff_money",
          color: "#F55726",
          key: "0",
        },
        {
          name: "付款金额：",
          value: "￥-10.50",
          color: "#F55726",
          key: "1",
        },
        {
          name: "抹零金额：",
          value: "￥0.00",
          color: "#F55726",
          key: "1",
        },
        {
          name: "结算日期：",
          value: "createdTime",
          color: "#999999",
          key: "0,1",
        },
      ],
      indexActive: 1, // 日期模态框中选择的哪项
    };
  },
  onLoad() {
    // this.getData1(this.pages1.page);
    // this.getData2(this.pages2.page);
  },
  methods: {
    openPicker() {
      this.$refs.pickerDate.open();
    },
    reset() {
      console.log("点击了重置");
    },
    confirm(e) {
      console.log("点击了确定", e);
    },
    //在线支付
    getData1(page) {
      var params = {
        size: 20,
        page,
      };
      $https("GET", "settlementListOnline", params, (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data.list;
          list = this.changeDate(list);
          this.dataList1 = this.dataList1.concat(list);
          this.pages1.count = res.data.data.count;
          this.pages1.page = page;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    //货到付款
    getData2(page) {
      var params = {
        size: 20,
        page,
      };
      $https("GET", "settlementListOffline", params, (res) => {
        if (res.data.errcode == 0) {
          var list = res.data.data.list;
          list = this.changeDate(list);
          this.dataList2 = this.dataList2.concat(list);
          this.pages2.count = res.data.data.count;
          this.pages2.page = page;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    //时间戳转时间
    changeDate(list) {
      for (let i in list) {
        var ms = Number(list[i].created_at + "000");
        var now = new Date();
        now.setTime(ms);
        var date =
          now.getFullYear() +
          "-" +
          (now.getMonth() + 1) +
          "-" +
          now.getDate() +
          " " +
          now.getHours() +
          ":" +
          now.getMinutes() +
          ":" +
          now.getSeconds();
        list[i].createdTime = date;
      }
      return list;
    },
    changeTab(index) {
      this.current = index;
    },
    toDetail(id) {
      let type = this.current == 0 ? 1 : 2;
      uni.navigateTo({
        url: `/pages/user/final_statement/final_statement_detail?id=${id}&type=${type}`,
      });
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },

    // 点击付款方式时打开付款方式的模态框
    changePayment(key) {
      // this.show = true;
      this.current = key;
    },

    showFun(item) {
      return item.key.includes(this.current);
    },
    changeTime(key) {
      this.indexActive = key;
    },
  },
  onReachBottom() {
    if (this.current == 0) {
      if (this.dataList1.length < this.pages1.count) {
        this.pages1.page++;
        this.getData(this.pages1.page, 1);
      }
    } else if (this.current == 1) {
      if (this.dataList2.length < this.pages2.count) {
        this.pages2.page++;
        this.getData(this.pages2.page, 2);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/scss/index.scss";
.page {
  font-size: 24rpx;
  .screen {
    width: 100%;
    height: 88rpx;
    align-items: center;
    background: #fff;
    position: fixed;
    z-index: 9;
    .active {
      color: #40ae36 !important;

      &::after {
        content: "";
        border-bottom: 1rpx solid #40ae36;
        width: 100rpx;
        display: block;
        margin: auto;
      }
    }
    .noActive {
      color: #666666;
    }

    &-box {
      flex: 1;
      text-align: center;
      height: 100%;
      line-height: 88rpx;
      image {
        width: 20rpx;
        height: 20rpx;
      }
    }
  }

  .content {
    width: 100%;
    padding-left: 20rpx;
    padding-right: 20rpx;
    &-box {
      width: 100%;
      border-radius: 20rpx;
      background: #ffffff;
      padding: 28rpx 41rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      &-top {
        align-items: center;
        &-left {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #666666;
        }
      }

      .line {
        width: 100%;
        height: 1rpx;
        background: #ececec;
        margin-top: 29rpx;
      }
      &-bottom {
        margin-top: 25rpx;
        .shopBox {
          align-items: center;
          .logo {
            width: 30rpx;
            height: 30rpx;
            background: red;
            border-radius: 50% 50%;
          }
          &-name {
            margin-left: 10rpx;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-right: 12rpx;
          }
        }

        .order {
          margin-top: 20rpx;
          width: 100%;
          &-div {
            align-items: center;
            .title {
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #666666;
              line-height: 48rpx;
            }
            .value {
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: bold;
              line-height: 48rpx;
            }
          }
        }
      }
    }
  }

  .tabs_box {
    position: fixed;
    left: 0;
    right: 0;
    background: #f6f6f7;
    margin: auto;
    .box {
      width: 328rpx;
      margin: 20rpx auto;
      .tabs {
        width: 100%;
      }
    }
  }
  .content {
    // #ifndef MP-WEIXIN
    margin-top: 120rpx;
    // #endif
    padding: 0 30rpx;
    // #ifdef MP-WEIXIN
    padding-top: 120rpx;
    // #endif
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16rpx 0;
      border-bottom: 1px solid #ececec;
      line-height: 40rpx;
      .left {
        width: 400rpx;
        .status {
          color: #e84b4b;
          &.green {
            color: #4fa389;
          }
        }
      }
      .right {
        display: flex;
        justify-content: space-between;
      }
      .icon {
        margin-left: 20rpx;
      }
    }
  }
}
.screen-show {
  width: 100%;
  height: 400rpx;
  padding: 33rpx 62rpx;
  &-selectBox {
    align-items: center;
    .time {
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 80rpx;
      height: 80rpx;
      margin-right: 90rpx;
    }
    .active {
      color: #40ae36;
      font-weight: bold;
      &::after {
        content: "";
        display: block;
        width: 100%;
        border-bottom: 1rpx solid #40ae36;
      }
    }
  }
}
/deep/.hx_text_overflow {
  font-family: PingFang SC;
  font-weight: bold;
}
</style>
